<!--
 * @Descripttion: 
 * @Author: Kevin
 * @Date: 2022-07-01 14:03:07
 * @LastEditors: Kevin
 * @LastEditTime: 2022-07-13 17:03:16
-->
<template>
  <RjModal
    width="600px"
    :title="$t('userManage.printUploadLogo')"
    :visible="value"
    @ok="handleOk"
    :afterClose="afterClose"
    @cancel="cancel"
    :confirmLoading="confirmLoading"
  >
    <a-form-model
      :labelCol="{ span: 8 }"
      labelAlign="left"
      :wrapperCol="{ span: 16 }"
      :model="form"
      :rules="rules"
      ref="form"
      :colon="false"
    >
      <a-form-model-item
        required
        prop="name"
        :label="$t('userManage.printLogoName')"
      >
        <a-input v-model="form.name" />
      </a-form-model-item>
      <a-form-model-item :label="$t('userManage.printUploadLogo')">
        <a-upload
          list-type="picture-card"
          :show-upload-list="false"
          :before-upload="beforeUpload"
          accept=".jpg,.png,.gif"
        >
          <img v-if="imageUrl" :src="imageUrl" alt="avatar" />
          <div v-else>
            <a-icon :type="loading ? 'loading' : 'plus'" />
            <div class="ant-upload-text">Upload</div>
          </div>
        </a-upload>
        <div>
          {{ $t('userManage.printUploadLogoTip') }}
        </div>
      </a-form-model-item>
    </a-form-model>
  </RjModal>
</template>

<script>
import { maccApi, requestHttp } from '@utils/index';
import { mapState } from 'vuex';
export default {
  props: {
    value: Boolean,
  },
  model: {
    prop: 'value',
    event: 'set',
  },
  data() {
    const rules = {
      name: [
        {
          required: true,
          message: this.$t('userManage.fieldIsRquired'),
          trigger: 'blur',
        },
      ],
    };
    return {
      form: {
        name: '',
      },
      rules,
      loading: false,
      imageUrl: '',
      confirmLoading: false,
    };
  },
  computed: {
    ...mapState('User', ['userInfo']),
    ...mapState('Group', ['groupId', 'groupInfo']),
  },
  methods: {
    handleOk() {
      this.$refs.form.validate(async (valid) => {
        if (valid) {
          if (this.imageUrl) {
            this.zhugePoint('macc-用户管理-Voucher上传Logo', {
              workId: 'maccNetConf',
              funcId: 'macc-userMng',
            });
            let params = {
              groupId: this.groupId,
              fileType: 'LOGO',
              module: 'VOUCHER',
              file: this.imageUrl,
              fileName: this.form.name,
            };
            this.confirmLoading = true;
            let res = await requestHttp({
              api: `${maccApi.USER_MANAGE_VOUCHER_PRINT_ADD_LOGO}`,
              method: 'POST',
              params,
            });
            this.confirmLoading = false;
            if (!res.code) {
              this.$message.success(this.$t('userManage.success'));
              this.$emit('ok');
              this.$emit('set', false);
            } else {
              this.$message.warning(res.msg);
            }
          } else {
            this.$message.warning(
              this.$t('userManage.printUploadLogoSelectImg')
            );
          }
        }
      });
    },
    cancel() {
      this.$emit('set', false);
    },
    beforeUpload(file) {
      let fileSize = Math.round((file.size / 1024) * 100) / 100;
      if (fileSize > 500) {
        this.$message.warning(this.$t('userManage.printUploadLogoTip'));
        return false;
      }
      const reader = new FileReader();
      reader.readAsDataURL(file);
      reader.onload = () => {
        let img = new Image();
        img.src = reader.result;
        img.onload = () => {
          let width = img.width;
          let height = img.height;
          if (width > 240 || height > 60) {
            this.$message.warning(this.$t('userManage.printUploadLogoTip'));
            return false;
          }
          this.imageUrl = reader.result;
        };
      };
      return false;
    },
    afterClose() {
      this.imageUrl = '';
      this.form.name = '';
    },
  },
};
</script>

<style lang="less" scoped>
.ant-upload-text {
}
</style>
